<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #template {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- <h1 :name="count">{{count}}</h1> -->
    <!-- <Comp /> -->
    <!-- <teleport to="#port">
      <div>11</div>
    </teleport> -->

    <!-- <Comp>
      <template #default>11</template>
      <template #o>11</template>
    </Comp> -->
    <!-- <teleport>
      <div>11</div>
    </teleport> -->
    <!-- <template #default>11</template> -->
    <!-- <suspense>
      <template #default>xx</template>
    </suspense> -->
    <!-- <component is="xx">xxx</component> -->
    <!-- <component is="div">xxx</component> -->

    <div id="template">
      <Comp :props="props">
        <div>aaa</div>
      </Comp>
    </div>
    <div id="app"></div>
    <div id="port"></div>
    <div id="port1"></div>
    <script src="../../../../packages/vue/dist/vue.global.js"></script>

    <script>
      const { createApp, ref, h, Teleport, reactive, isProxy } = Vue

      class Comp {
        data() {
          return {
            a: 1
          }
        }
        static __vccOpts = { template: '<div>11</div>' }
      }

      const template = document.querySelector('#template')?.innerHTML
      const App = {
        setup() {
          const count = ref(2)
          const add = () => count.value++
          const props = reactive({a: 1})
          console.log("props:", props)
          // console.log('isProxy', isProxy(props))
          // return () => {
          //   h(Teleport, null, {
          //     default() {
          //       return '111'
          //     }
          //   })
          // }
          return {
            count,
            props,
            add
          }
          // return () => {
          //   return h(Comp, null, {
          //     default() {
          //       return '11'
          //     }
          //   })
          // }
        },
        template,
        components: {
          Comp: { template: '<div>11</div>' }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
